<template>
	<div class="app-container">
		<el-row :gutter="20">
			<el-col :span="6">
				<el-card>
					<el-statistic style="margin: 30px auto;" group-separator="," :precision="2" :value="5" title="轮次总数"></el-statistic>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<el-statistic style="margin: 30px auto;" group-separator="," :precision="2" :value="30.18" title="审核超期率">
						<template slot="suffix">
							%
						</template>
					</el-statistic>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<el-statistic style="margin: 30px auto;" group-separator="," :precision="2" :value="98.92" title="完成率">
						<template slot="suffix">
							%
						</template>
					</el-statistic>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card>
					<el-statistic style="margin: 30px auto;" group-separator="," :precision="2" :value="5.23" title="超期率">
						<template slot="suffix">
							%
						</template>
					</el-statistic>
				</el-card>
			</el-col>

		</el-row>
		<el-row :gutter="20">
			<el-col :span="12">
				<el-card style="height: 32vh;margin-bottom: 20px;">
					<div slot="header" class="clearfix">
					    <span>图表1</span>
					  </div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: 32vh;margin-bottom: 20px;">
					<div slot="header" class="clearfix">
					    <span>图表2</span>
					  </div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: 32vh;">
					<div slot="header" class="clearfix">
					    <span>图表3</span>
					  </div>
				</el-card>
			</el-col>
			<el-col :span="12">
				<el-card style="height: 32vh;">
					<div slot="header" class="clearfix">
					    <span>图表4</span>
					  </div>
				</el-card>
			</el-col>
		</el-row>
		<myDrawer ref="myDrawer" @ok="drawerOk" :headerBtnShow="btnShow">
			<template #center>
				<modelForm ref="modelForm" @ok="modelFormOk"></modelForm>
			</template>
		</myDrawer>
	</div>
</template>

<script>
	import {
		getAction,
		postAction,
		editAction,
		removeAction,
		detailAction,
	} from "@/api/api";
	import mylog from '@/views/components/mylog.vue'
	import myDrawer from '@/views/components/myDrawer.vue'
	import task from '@/views/lanjing/task/index.vue'
	import modelForm from '@/views/lanjing/atask/modelForm.vue'
	import dept from '@/views/lanjing/task/dept.vue'
	import {
		mixin
	} from '@/mixins/mixins';
	export default {
		dicts: ['model_type'],
		mixins: [mixin],
		components: {
			mylog,
			myDrawer,
			task,
			modelForm,
			dept
		},
		name: "Template",
		data() {
			return {
				temaplateTypes: [{
						label: '未发布',
						value: 0,
					},
					{
						label: '已发布',
						value: 1,
					}
				],
				// 显示搜索条件
				showSearch: true,
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					temaplateName: null,
					temaplateDesc: null,
					temaplateType: null,
					temaplateBackup1: null,
					temaplateBackup2: null,
					temaplateBackup3: null,
					temaplateBackup4: null,
					ancestors: null,
					// temaplateTop: 1,
					temaplateFankui: null,
					temaplatePingfen: null,
					parentIds: [],
					idd: null
				},
				// 表单校验
				rules: {},
				//自动调用GetList
				autoGetList: false,
				//接口名称
				apiUrl: '/lanjing/round',
				rowForm: null,
				btnShow: true,
			};
		},
		created() {
			this.list = [{
					"createBy": "",
					"createTime": "2024-05-19 18:02:07",
					"updateBy": "",
					"updateTime": "2024-05-19 18:14:56",
					"remark": null,
					"id": 7,
					"taskName": "第一轮次",
					"taskDesc": "第一轮次",
					"temaplateType": "1",
					"startTime": "2024-05-08",
					"temaplateBackup1": null,
					"temaplateBackup2": "{\"id\":1715266781365,\"name\":\"一级\"}",
					"temaplateBackup3": null,
					"temaplateBackup4": null,
					"parentId": 0,
					"ancestors": "",
					"temaplateTop": "1",
					"temaplateTask": "[{\"id\":1715486556001,\"nodeDay\":1,\"nodeName\":\"根节点任务\",\"nodeRemark\":\"1\",\"remark\":\"1\",\"pingfenList\":[{\"pfNumber\":1,\"pfJianNumber\":1,\"pfName\":\"1\",\"pfDept\":\"1\",\"remark\":\"1\",\"edit\":false}],\"yaoqiuList\":[{\"nodeName\":\"1\",\"nodeRemark\":\"1\",\"remark\":\"1\",\"edit\":false}],\"children\":[{\"parentId\":1715486556001,\"id\":1715488399978,\"pingfenList\":[{\"pfNumber\":2,\"pfJianNumber\":2,\"pfName\":\"2\",\"pfDept\":\"2\",\"remark\":\"2\",\"edit\":false}],\"yaoqiuList\":[{\"nodeName\":\"1\",\"nodeRemark\":\"1\",\"remark\":\"1\",\"edit\":false}],\"ids\":[1715486556001,1715488399978],\"nodeDay\":2,\"nodeName\":\"二级任务\",\"remark\":\"2\",\"nodeRemark\":\"2\",\"children\":[{\"parentId\":1715488399978,\"id\":1715488417355,\"pingfenList\":[{\"pfNumber\":3,\"pfJianNumber\":3,\"pfName\":\"3\",\"pfDept\":\"3\",\"remark\":\"3\",\"edit\":false}],\"yaoqiuList\":[{\"nodeName\":\"3\",\"nodeRemark\":\"3\",\"remark\":\"3\",\"edit\":false}],\"ids\":[1715486556001,1715488399978,1715488417355],\"nodeDay\":4,\"nodeName\":\"三级任务\",\"remark\":\"4\",\"nodeRemark\":\"4\",\"nodeQianzhi\":[1715486556001,1715488399978],\"startTime\":\"2024-06-14\",\"endTime\":\"2024-06-18\"}],\"nodeQianzhi\":[1715493274570],\"startTime\":\"2024-06-10\",\"endTime\":\"2024-06-13\"}],\"nodeQianzhi\":[\"root\"],\"startTime\":\"2024-05-08\",\"endTime\":\"2024-05-09\"},{\"id\":1715493274570,\"nodeDay\":30,\"nodeName\":\"测试节点\",\"remark\":\"1213123123\",\"nodeRemark\":\"测试\",\"pingfenList\":[{\"pfNumber\":1,\"pfJianNumber\":-1,\"pfName\":\"评分项名称\",\"pfDept\":\"评估责任单位\",\"remark\":\"评分描述\",\"edit\":false}],\"yaoqiuList\":[{\"nodeName\":\"任务名称\",\"nodeRemark\":\"任务描述\",\"remark\":\"任务备注\",\"edit\":false}],\"nodeQianzhi\":[1715486556001],\"children\":[{\"parentId\":1715493274570,\"id\":1715517164859,\"pingfenList\":[],\"yaoqiuList\":[],\"ids\":[1715493274570,1715517164859],\"nodeDay\":5,\"nodeName\":\"测试二级任务\",\"nodeRemark\":\"1\",\"remark\":\"1\",\"nodeQianzhi\":[1715486556001,1715488399978],\"startTime\":\"2024-06-14\",\"endTime\":\"2024-06-19\"},{\"parentId\":1715493274570,\"id\":1715517187674,\"pingfenList\":[],\"yaoqiuList\":[],\"ids\":[1715493274570,1715517187674],\"nodeDay\":5,\"nodeName\":\"测试二级任务\",\"nodeRemark\":\"1\",\"remark\":\"1\",\"nodeQianzhi\":[\"root\"],\"startTime\":\"2024-05-08\",\"endTime\":\"2024-05-13\"}],\"startTime\":\"2024-05-10\",\"endTime\":\"2024-06-09\"},{\"parentId\":1715486556001,\"id\":1715488399978,\"pingfenList\":[{\"pfNumber\":2,\"pfJianNumber\":2,\"pfName\":\"2\",\"pfDept\":\"2\",\"remark\":\"2\",\"edit\":false}],\"yaoqiuList\":[{\"nodeName\":\"1\",\"nodeRemark\":\"1\",\"remark\":\"1\",\"edit\":false}],\"ids\":[1715486556001,1715488399978],\"nodeDay\":2,\"nodeName\":\"二级任务\",\"remark\":\"2\",\"nodeRemark\":\"2\",\"children\":[{\"parentId\":1715488399978,\"id\":1715488417355,\"pingfenList\":[{\"pfNumber\":3,\"pfJianNumber\":3,\"pfName\":\"3\",\"pfDept\":\"3\",\"remark\":\"3\",\"edit\":false}],\"yaoqiuList\":[{\"nodeName\":\"3\",\"nodeRemark\":\"3\",\"remark\":\"3\",\"edit\":false}],\"ids\":[1715486556001,1715488399978,1715488417355],\"nodeDay\":4,\"nodeName\":\"三级任务\",\"remark\":\"4\",\"nodeRemark\":\"4\",\"nodeQianzhi\":[1715486556001,1715488399978],\"startTime\":\"2024-06-14\",\"endTime\":\"2024-06-18\"}],\"nodeQianzhi\":[1715493274570],\"startTime\":\"2024-06-10\",\"endTime\":\"2024-06-13\"},{\"parentId\":1715488399978,\"id\":1715488417355,\"pingfenList\":[{\"pfNumber\":3,\"pfJianNumber\":3,\"pfName\":\"3\",\"pfDept\":\"3\",\"remark\":\"3\",\"edit\":false}],\"yaoqiuList\":[{\"nodeName\":\"3\",\"nodeRemark\":\"3\",\"remark\":\"3\",\"edit\":false}],\"ids\":[1715486556001,1715488399978,1715488417355],\"nodeDay\":4,\"nodeName\":\"三级任务\",\"remark\":\"4\",\"nodeRemark\":\"4\",\"nodeQianzhi\":[1715486556001,1715488399978],\"startTime\":\"2024-06-14\",\"endTime\":\"2024-06-18\"},{\"parentId\":1715493274570,\"id\":1715517164859,\"pingfenList\":[],\"yaoqiuList\":[],\"ids\":[1715493274570,1715517164859],\"nodeDay\":5,\"nodeName\":\"测试二级任务\",\"nodeRemark\":\"1\",\"remark\":\"1\",\"nodeQianzhi\":[1715486556001,1715488399978],\"startTime\":\"2024-06-14\",\"endTime\":\"2024-06-19\"},{\"parentId\":1715493274570,\"id\":1715517187674,\"pingfenList\":[],\"yaoqiuList\":[],\"ids\":[1715493274570,1715517187674],\"nodeDay\":5,\"nodeName\":\"测试二级任务\",\"nodeRemark\":\"1\",\"remark\":\"1\",\"nodeQianzhi\":[\"root\"],\"startTime\":\"2024-05-08\",\"endTime\":\"2024-05-13\"}]",
					"deptIds": "104,105"
				},
				{
					"createBy": "",
					"createTime": "2024-05-19 18:05:15",
					"updateBy": "",
					"updateTime": null,
					"remark": null,
					"id": 8,
					"taskName": "测试",
					"taskDesc": "1",
					"temaplateType": "0",
					"startTime": "2024-04-30",
					"temaplateBackup1": null,
					"temaplateBackup2": null,
					"temaplateBackup3": null,
					"temaplateBackup4": null,
					"parentId": 0,
					"ancestors": "",
					"temaplateTop": "1",
					"temaplateTask": null,
					"deptIds": null
				}
			]
			return
			this.pageNum = '任务模板'
			this.getList(null, this.listMap)
			this.$nextTick(() => {
				this.$refs.dept.getList();
			})
		},
		methods: {
			listMap(e) {
				e = e.map(v => {
					let obj = {
						...v
					}
					if (obj.temaplateBackup1) {
						obj.temaplateBackup1 = true
					}
					return obj
				})
				return e
			},

			// 表单重置
			reset() {
				this.form = {
					id: null,
					temaplateName: null,
					temaplateDesc: null,
					temaplateType: null,
					temaplateBackup1: null,
					temaplateBackup2: null,
					temaplateBackup3: null,
					temaplateBackup4: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					remark: null,
					parentId: 0,
					ancestors: null,
					temaplateTop: 1,
					temaplateFankui: null,
					temaplatePingfen: null
				};
				this.resetForm("form");
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.id)
				this.single = selection.length !== 1
				this.multiple = !selection.length
			},
			load(tree, treeNode, resolve) {
				console.log(tree, treeNode)
				getAction(`${this.apiUrl}/list`, {
					parentId: tree.id,
					pageNum: 1,
					pageSize: 999,
				}).then(res => {
					resolve(res.rows);
				})
			},
			addDpet(row) {
				// this.rowForm = row
				this.reset();
				//idd 父级Id
				if (row.parentId === 0) {
					let obj = null
					if (row.temaplateBackup2) {
						obj = JSON.parse(row.temaplateBackup2)
					}
					//判断第一级自增id
					this.form.iid = !obj ? 1 : obj.length
					//传入模板id
					this.form.parentIds = [row.id]
					// this.form.parentIds  = [row.idd]
				} else {


				}
				this.handleAdd(false)
			},
			updataParentId() {
				this.submitForm()
			},
			setCentent(row) {
				this.$refs.myDrawer.open = true;
				this.$refs.myDrawer.title = `【${row.taskName}】编辑轮次配置`;

				this.btnShow = row.temaplateType == 1 ? false : true;
				this.$nextTick(() => {
					console.log(row)
					// detailAction(`${this.apiUrl}`, row.id).then(res => {
					this.$refs.modelForm.setRowInfo(row)
					// })
				})
			},
			drawerOk() {
				this.$refs.modelForm.getDataObj()
			},
			modelFormOk(e) {
				//派发任务接口
				editAction(this.apiUrl, e).then(res => {
					if (res.code == 200) {
						this.$message.success('保存成功')
						this.$refs.myDrawer.cancel()
					}
				})

			},
			startModel(row) {
				postAction(`/lanjing/task/paifaSave`, {
					...row
				}).then(response => {
					if (res.code == 200) {
						this.$message.success('发布成功')
						this.getList()
					}
				});
			}
		}
	};
</script>